
$(function () {
    map();

    function map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map'));
        
        var data = [
            { name: '路南区', value: 0, value1: 0, value2:0 , value3:1}, //0_0_0_1
            { name: '路北区', value: 0, value1:0, value2:0 , value3:10}, //0_0_0_10
            { name: '古冶区', value: 0, value1:0, value2:4 , value3:3}, //0_0_4_3
            { name: '开平区', value: 3, value1:0, value2:2 , value3:12}, // 3_0_2_12
            { name: '丰南区', value: 0, value1:0, value2:1 , value3:30}, //0_0_2_30
            { name: '丰润区', value: 0, value1:0, value2:29 , value3:13}, //0_0_30_18
            { name: '曹妃甸区', value: 0, value1:0, value2:0 , value3:16}, //0_0_0_17
            { name: '滦南县', value: 0, value1:1, value2:3 , value3:12}, //0_1_4_12
            { name: '乐亭县', value: 0, value1:0, value2:1 , value3:5}, //0_0_1_5
            { name: '迁西县', value: 30, value1:1, value2:10 , value3:0}, // 47_15_0_10
            { name: '玉田县', value: 0, value1:0, value2:8 , value3:13}, //0_0_9_14
            { name: '芦台经济开发区', value: 0, value1:0, value2:0 , value3:1}, //0_0_0_1
            { name: '遵化市', value: 37, value1:0, value2:2 , value3:8}, //65_0_2_11
            { name: '迁安市', value: 51, value1:14, value2:3 , value3:17}, // 78_39_3_17
            { name: '滦州市', value: 7, value1:2, value2:5 , value3:15}, // 8_8_6_15
// 高新  曹经开 海港 汉沽
        ];

        option = {

            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    if (typeof (params.value)[2] == "undefined") {
                        var tmp = "<div><div class='alltitle' style=''><span class='alltitleFront'>" + params.name + "监控企业数量</span></div>"
                            + "<div style='margin:3px 0;color:#fff'>选矿：" + params.data.value + "</div>"
                            + "<div style='margin:3px 0;color:#fff'>采矿：" + params.data.value1 + "</div>"
                            + "<div style='margin:3px 0;color:#fff'>水泥：" + params.data.value2 + "</div>"
                            + "<div style='margin:3px 0;color:#fff'>混凝土：" + params.data.value3 + "</div>"
                            + "<div>";

                        return tmp;
                    } else {
                        return params.name + '' + params.value[2];
                    }
                },
                backgroundColor: 'rgba(50,50,50,0.7)',
                borderColor: '#fff',
                textStyle: {
                    color: '#fff'
                },
                extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);'
            },
            grid: {
                left: '10',
                top: '38',
                right: '12',
                bottom: '12',
                containLabel: true
            },
            series: [
                {
                    type: 'map',
                    map: 'tangshan', // 使用注册的地图名称
                    data: data,
                    symbolSize: function (val) {
                        return val[2] / 15;
                    },
                    label: {
                        emphasis: {
                            show: false
                        },
                        show: true, // 显示标签
                        color: '#fff', // 字体颜色
                        fontSize: 14,
                        formatter: '{b}', // 显示区域名称（{b} 是默认的 region name）
                        itemStyle: {
                            areaColor: '#ffeb3b', // 悬停区域颜色
                            borderColor: '#333',  // 悬停边框颜色
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            color: '#333' // 悬停标签颜色
                        }
                    },
                    roam: false,//禁止其放大缩小

                    itemStyle: {
                        normal: {
                            areaColor: '#0c4381',  // 地图颜色
                            borderColor: '#d0eeff' // 边界颜色
                        },
                        emphasis: {
                            areaColor: '#c0e9ff', // 选中后的颜色
                            itemStyle: {
                                shadowColor: 'rgba(0, 0, 0, 0.8)',
                                shadowBlur: 15,
                                shadowOffsetX: 5,
                                shadowOffsetY: 5
                            }
                        },
                        areaColor: '#1E90FF',
                        borderColor: '#fff',
                        borderWidth: 1,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3,
                        show: true
                    },
                },
            ],

        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });


        myChart.on('click', function (params) {
            console.log(params);
            $("#xkCount").html(params.data.value);
            $("#ckCount").html(params.data.value1);
            $("#snCount").html(params.data.value2);
            $("#nntCount").html(params.data.value3);
            $("#xkP").html("选矿企业监控数");
            $("#ckP").html("采矿企业监控数");
            $("#snP").html("水泥企业监控数");
            $("#nntP").html("混凝土企业监控数");
            
            
            $('#center-data').fadeIn(300, function () {
            });
            $('#center-data-fixed').fadeOut(500, function () {
            });
        });
    }



})

